import { useDispatch, useSelector } from 'react-redux'
import { changeFilter } from '../store/modules/todomvc'

const TodoFooter = () => {
  const arr = ['all', 'active', 'completed']
  const listCount = useSelector((state) => state.todomvc.list).filter(
    (item) => !item.done
  ).length
  const filter = useSelector((state) => state.todomvc.types)
  const dispatch = useDispatch()
  const changeType = (item) => {
    dispatch(changeFilter(item))
  }
  return (
    <footer className='footer'>
      <span className='todo-count'>
        <strong>{listCount}</strong> item left
      </span>
      <ul className='filters'>
        {arr.map((item) => (
          <li key={item}>
            <a
              className={item === filter ? 'selected' : ''}
              href='#/'
              onClick={() => changeType(item)}
            >
              {item}
            </a>
          </li>
        ))}
      </ul>
      <button className='clear-completed'>Clear completed</button>
    </footer>
  )
}

export default TodoFooter
